<template>
  <te-modal v-bind="$attrs" v-on="$listeners" class="new-project-modal">
    <template #title>新建项目</template>
    <template #content>
      <div class="form-content">
        <div class="form-group">
          <label for="project-name">项目名称</label>
          <TeInput class="modal-input" v-model="project_name" id="project-name" placeholder />
        </div>
        <div class="form-group">
          <label for="project-decription">项目介绍</label>
          <te-text-area
            rows="6"
            class="modal-textarea"
            v-model="project_description"
            id="project-decription"
            placeholder
          ></te-text-area>
        </div>
        <div class="form-group">
          <label>项目语言</label>
          <select-language
            :languages="languages"
            :r-language="rLanguage"
            @rLanChange="(val) => (rLanguage = val)"
            :n-language="nLanguage"
            @nLanChange="(val) => (nLanguage = val)"
          >
            <template #r-lang="{lang,index}">
              <option :value="index">{{ lang }}</option>
            </template>
            <template #n-lang="{lang,index}">
              <option :value="index">{{ lang }}</option>
            </template>
          </select-language>
        </div>
        <div class="form-group">
          <label for>著作授权许可证</label>
          <select-license :licenses="licenses" v-model="select_license">
            <template #lincenses="{license}">
              <option :value="license">{{ license }}</option>
            </template>
          </select-license>
        </div>
        <div class="form-group">
          <label>汉化mod类型</label>
          <select-game-type :types="types" v-model="select_type">
            <template #types="{type}">
              <option :value="type">{{ type }}</option>
            </template>
          </select-game-type>
        </div>
      </div>
      <div class="files-content">
        <div class="label">文件列表</div>
        <file-group-view></file-group-view>
      </div>
    </template>
    <template #footer>
      <div class="footer-btn">
        <te-button class="create-button">创建</te-button>
      </div>
    </template>
  </te-modal>
</template>

<script>
import TeModal from "@/components/TeUi/TeModal";
import TeInput from "@/components/TeUi/TeInput";
import TeTextArea from "@/components/TeUi/TeTextArea";
import TeButton from "@/components/TeUi/TeButton";
import SelectLanguage from "./NewProject/SelectLanguage";
import SelectLicense from "./NewProject/SelectLicense";
import SelectGameType from "./NewProject/SelectGameType";
import FileGroupView from "./NewProject/fileGroupView";

export default {
  components: {
    TeModal,
    TeInput,
    TeTextArea,
    SelectLanguage,
    SelectLicense,
    FileGroupView,
    SelectGameType,
    TeButton
  },
  data() {
    return {
      project_name: "",

      project_description: "",
      /**
       * Language
       */
      languages: {
        en: "English",
        de: "German",
        fr: "France",
        cn: "简体中文",
        tc: "繁体中文"
      },
      rLanguage: "en",
      nLanguage: "cn",
      /**
       * Lincense
       */
      licenses: [
        "CC BY",
        "CC BY-NC",
        "CC BY-NC-ND",
        "CC BY-NC-SA",
        "CC BY-ND",
        "CC BY-SA"
      ],
      select_license: "CC BY",
      /**
       * Game Type
       */
      types: ["RimWorld"],
      select_type: "RimWorld"
    };
  },
  methods: {}
};
</script>

<style scoped>
label,
.label {
  display: block;
  font-size: 0.875em;
  margin-bottom: 6px;
}

.new-project-modal >>> .te-modal-content {
  display: flex;
}

.form-content {
  width: 300px;
  margin-right: 30px;
}

.form-group:not(:last-child) {
  margin-bottom: 20px;
}

.files-content {
  width: 350px;
  display: flex;
  flex-direction: column;
}

.modal-input,
.modal-textarea {
  padding: 0 14px;
  height: 40px;
  background: #484848;
  color: #f4f4f4;
}

.modal-input::placeholder {
  color: #999;
}

.modal-textarea {
  background: #484848;
  color: #f4f4f4;
  padding: 14px;
  height: auto;
}

.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.create-button {
  margin-top: 20px;
  width: 106px;
  height: 40px;
}
</style>
